<template>
  <van-popup
    :show="true"
    position="bottom"
    :overlay="false"
    :lock-scroll="false"
    safe-area-inset-bottom
  >
    <van-cell-group inset>
      <van-field
        ref="RefField"
        v-model="comment"
        center
        maxlength="200"
        label=""
        type="textarea"
        rows="1"
        autosize
        placeholder="请输入消息（200字以内）"
        class="input-field-text"
      >
        <template #button>
          <van-button size="small" type="primary" @click="handleConfirm()"> 发送 </van-button>
        </template>
      </van-field>
    </van-cell-group>
  </van-popup>
</template>

<script setup>
  import { useChatStore } from '@/store/chat'
  import { isEmpty } from '@/utils'

  const chatStore = useChatStore()

  const RefField = ref()

  const comment = ref('')
  const handleConfirm = () => {
    if (isEmpty(comment.value)) {
      showToast('请输入评论')
      return
    }

    chatStore.sendComment(comment.value)
    comment.value = ''
  }

  // emits('login', username)
</script>

<style lang="less" scoped>
  .input-field-text {
    :deep(.van-field__control) {
      max-height: 72px !important;
    }
  }
</style>
